<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>LayIM 3.x PC版本地演示test</title>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
    <link rel="stylesheet" href="./static/css/layui.css">
    <style>
        html {
            background-color: #333;
        }
    </style>
</head>

<body>
<script src="./static/layui.js"></script>
<script>
	if (!/^http(s*):\/\//.test(location.href)) {
		alert('请部署到localhost上查看该演示');
	}
	const log = console.log.bind(console)
	log('git push test ')
	layui.use('layim', function(layim) {
		log('debug cache', layim.cache())
		var ip = 'localhost';
		var port = 8888;
		var username = 13105910000;
		var password = 123;
		socket = new WebSocket("ws:"+ip+":"+port+"?username="+username+"&password="+password);

		socket.onopen = function() {
			console.log('连接成功');
			// socket.emit('init', '测试机2号')
			// socket.on('init', function(msg) {
			// 	log('init success')
			// })
		}
		socket.onmessage = function(res){
			//res为接受到的值，如 {"emit": "messageName", "data": {}}
			//emit即为发出的事件名，用于区分不同的消息
            log('socket.onmessage res', res)
		};
		// 监听登录验证信息
		// socket.on('message', function(msg) {
		//     console.log('监听message', msg);
		// })
		// socket.on('linkStart', function(msg) {
		//     layim.getMessage(JSON.parse(msg));
		// })
		// socket.on('replyGroup', function(msg) {
		//     // 判断是否拥有该群号 有则发送消息
		//     // 实际上应从后端 socket 创建 room，直接在 room 内广播消息
		//     log('监听群消息', JSON.parse(msg))
		//     layim.getMessage(JSON.parse(msg));
		// })
		// socket.on('reply', function(msg) {
		//     log('监听私聊消息', JSON.parse(msg))
		//     layim.getMessage(JSON.parse(msg));
		// })
		//演示自动回复
		var autoReplay = [
			`测试自动回复功能
              By Feng`
		];

		//基础配置
		layim.config({
			// 初始化时后端应返回群列表及所对应的 socket room 列表， 从前端进行join
			//初始化接口
			init: {
				url: './json/getList.2.json',
				data: {}
			}

			//或采用以下方式初始化接口
			/*
            ,init: {
              mine: {
                "username": "LayIM体验者" //我的昵称
                ,"id": "100000123" //我的ID
                ,"status": "online" //在线状态 online：在线、hide：隐身
                ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                ,"avatar": "a.jpg" //我的头像
              }
              ,friend: []
              ,group: []
            }
            */


			//查看群员接口
			,
			members: {
				url: 'json/getMembers.json',
				data: {}
			}

			//上传图片接口
			,
			uploadImage: {
				url: '/upload/image' //（返回的数据格式见下文）
				,
				type: '' //默认post
			}

			//上传文件接口
			,
			uploadFile: {
				url: '/upload/file' //（返回的数据格式见下文）
				,
				type: '' //默认post
			}

			,
			isAudio: true //开启聊天工具栏音频
			,
			isVideo: true //开启聊天工具栏视频

			//扩展工具栏
			,
			tool: [{
				alias: 'code',
				title: '代码',
				icon: '&#xe64e;'
			}]

			// ,brief: true //是否简约模式（若开启则不显示主面板）

			//,title: 'WebIM' //自定义主面板最小化时的标题
			//,right: '100px' //主面板相对浏览器右侧距离
			//,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
			,
			initSkin: '5.jpg' //1-5 设置初始背景
			//,skin: ['aaa.jpg'] //新增皮肤
			//,isfriend: false //是否开启好友
			//,isgroup: false //是否开启群组
			//,min: true //是否始终最小化主面板，默认false
			,
			notice: true //是否开启桌面消息提醒，默认false
			//,voice: false //声音提醒，默认开启，声音文件为：default.mp3
			,
			// msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
			msgbox: layui.cache.dir + '../msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
			,
			find: layui.cache.dir + '../find.html' //发现页面地址，若不开启，剔除该项即可
			,
			chatLog: layui.cache.dir + '../chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
		});

		//监听在线状态的切换事件
		layim.on('online', function(data) {
			//console.log(data);
		});

		//监听签名修改
		layim.on('sign', function(value) {
			log('修改签名为: ', value)
			//console.log(value);
		});

		//监听自定义工具栏点击，以添加代码为例
		layim.on('tool(code)', function(insert) {
			layer.prompt({
				title: '插入代码',
				formType: 2,
				shade: 0
			}, function(text, index) {
				layer.close(index);
				insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
			});
		});

		//监听layim建立就绪
		layim.on('ready', function(res) {

			console.log(res.mine);

			layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得

			//添加好友（如果检测到该socket）
			layim.addList({
				type: 'group',
				avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg",
				groupname: 'Angular开发',
				id: "12333333",
				members: 0
			});
			layim.addList({
				type: 'friend',
				avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1",
				username: '聊天测试',
				groupid: 2,
				id: "1233333312121212",
				remark: "tes11111t"

			});

			setTimeout(function() {
				//接受消息（如果检测到该socket）
				// layim.getMessage({
				//     username: "Hi",
				//     avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100",
				//     id: "10000111",
				//     type: "friend",
				//     content: "临时：" + new Date().getTime()
				// });

				/*layim.getMessage({
                  username: "贤心"
                  ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
                  ,id: "100001"
                  ,type: "friend"
                  ,content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime()
                });*/

			}, 3000);
		});

		//监听发送消息
		layim.on('sendMessage', function(data) {
			var To = data.to;
			log('data', data)
			if (To.type === 'friend') {
				layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
				log('私聊')
				socket.emit('message', JSON.stringify(data))
				let sendParams = {
					from: data.mine.id,
					to: data.to.id,
					content: data.mine.content,
					type: 1,
				}
				log('sendParams', sendParams)
				$.post('/send1', sendParams, (res) => {
					log('send1 的返回值', res)
			})
			}
			if (To.type === 'group') {
				log('群聊')
				socket.emit('groupMessage', JSON.stringify(data))
			}


			//演示自动回复
			// setTimeout(function() {
			//     var obj = {};
			//     if (To.type === 'group') {
			//         obj = {
			//             username: '模拟群员' + (Math.random() * 100 | 0),
			//             avatar: layui.cache.dir + 'images/face/' + (Math.random() * 72 | 0) + '.gif',
			//             id: To.id,
			//             type: To.type,
			//             content: autoReplay[Math.random() * autoReplay.length | 0]
			//         }
			//     } else {
			//         obj = {
			//             username: To.name,
			//             avatar: To.avatar,
			//             id: To.id,
			//             type: To.type,
			//             content: autoReplay[Math.random() * autoReplay.length | 0]
			//         }
			//         layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
			//     }
			//     layim.getMessage(obj);
			// }, 1000);
		});

		//监听查看群员
		layim.on('members', function(data) {
			console.log('members', data);
		});

		//监听聊天窗口的切换
		layim.on('chatChange', function(res) {
			var type = res.data.type;
			console.log('当前聊天窗口为', res.data.username)
			if (type === 'friend') {
				//模拟标注好友状态
				//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
			} else if (type === 'group') {
				//模拟系统消息
				layim.getMessage({
					system: true,
					id: res.data.id,
					type: "group",
					content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
				});
			}
		});



	});
</script>
</body>

</html>